<template>
    <div>
        <!-- 检索区域 -->
        <el-form v-has="'notice-search'" ref="query" label-width="80px" :inline="true">
            <el-form-item label="标题:">
                <el-select v-model="table.search.logType" placeholder="请选择">
                    <el-option value="" label="请选择"></el-option>
                    <el-option value="1" label="信息"></el-option>
                    <el-option value="2" label="警告"></el-option>
                    <el-option value="3" label="错误"></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" @click="handlerSearch">查询</el-button>
        </el-form>
        <!-- 列表数据 -->
        <DataTable class="mb-5" ref="dataTable" @buttonEvent="buttonEvent" :columns="table.columns" :apiUrl="table.apiUrl" :search="table.search" :buttonGroup="table.buttonGroup" :width="500"></DataTable>

        <!-- 日志详细 -->
        <logDetail v-if="logDetailVisible" :dialogVisible="logDetailVisible" @close="logDetailVisible=false"></logDetail>
    </div>
</template>

<script>
import DataTable from "@/components/DataTable.vue";
import logDetail from "../log/detail.vue";

export default {
  components: {
    DataTable,
    logDetail
  },
  data() {
    return {
      table: {
        columns: [
          {
            title: "日志名称",
            key: "logName"
          },
          {
            title: "时间",
            key: "logDate"
          },
          {
            title: "日志类型",
            key: "logType",
            formatter: function(row, column) {
              switch (row.logType) {
                case 1:
                  return "信息";
                case 2:
                  return "警告";
                case 3:
                  return "错误";
              }
            }
          },
          {
            title: "调用人id",
            key: "logUserId"
          },
          {
            title: "接口地址",
            key: "logControllerAction"
          }
        ],
        apiUrl: "/api/MongoDB/GetLogsPaged",
        search: {
          logType: ""
        },
        buttonGroup: [
          {
            name: "查看",
            type: "primary",
            icon: "",
            incident: "toDetail"
          }
        ]
      },
      logDetail: false
    };
  },

  methods: {
    buttonEvent(incident, index, row) {
      this[incident](index, row);
    },

    //检索
    handlerSearch: function() {
      this.$refs.dataTable.initload();
    },

    toDetail: function(index, row) {
      this.$router.push({
        path: "/log/detail",
        query: { data: row }
      });
    }
  }
};
</script>

